<template>
  <div class="main">
    <div class="sxPopupDiv">
      <!-- <goBack :white="true" aa="./planList" :hasTitle="true" topTitle="选路径"></goBack> -->
      <headerBack>
        <b slot="my-center" style="font-weight:600">选路径</b>
      </headerBack>
      <scroller lock-x>
        <div style="margin-top: 0.8rem;">
          <div class="sxPopMainDiv">
            <div class="tipTitle">请在以下路径中选择一个</div>
            <div class="routerList">
              <div v-for="(item, index) of sxRouterList" :key="index" :class="['routerItem', sxRouterName == item ? 'choSxRouter' : '' ]" @click="handleChoSxRouter(item)">
                {{ item }}
              </div>
            </div>
          </div>
          <div style="width: 100%; height: 2rem;"></div>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
import ls from "store2";
import { savePath } from "~/api/colleges";
import headerBack from "~/components/headerBack";
export default {
  components: {
    headerBack
  },
  data() {
    return {
      sxRouterList: ['自主招生', '普通高考', '保送生', '公费师范生', '免费医学生', '综合评价', '高职单招', '高水平运动队', '体育类招生', '高水平艺术团', '艺术类招生', '军警类招生', '飞行员招生', '港澳高校招生', '专项计划', '出国留学', '民族班及民族预科'],
      sxRouterName: null,
    }
  },
  mounted() {
    this.$visit(this.$route.path)
    if (this.$route.query.type) {
      this.sxRouterName = this.$route.query.type;
    }
  },
  methods: {
    handleChoSxRouter(name) {
      this.sxRouterName = name
      this.$loading('open')
      savePath({
        path: name,
        userType: ls.get('userType')
      }).then(() => {
        // this.goto('./planList')
        // this.$router.replace({path:'./planList'})
        this.$router.back()
      }).finally(() => {
        this.$hideLoading()
      })
    },
    goto(routerName, queryData) {
      this.$router.push({
        path: routerName,
        query: {
          type: queryData
        }
      });
    },
  }
}
</script>

<style lang="less" scoped>
  .sxPopupDiv {
    width: 7.5rem;
    background: #fff;
    height: 100vh;
    .sxPopMainDiv {
      margin-top: 0.32rem;
      padding: 0 0.32rem;
      background: #fff;
      .tipTitle {
        color: #222;
        font-size: 0.26rem;
        font-weight: bold;
        line-height: 0.44rem;
        margin-bottom: 0.32rem;
      }
      .routerList {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        .routerItem {
          width: 3.27rem;
          height: 0.96rem;
          line-height: 0.96rem;
          border-radius: 0.08rem;
          background: #F5F5FA;
          font-size: 0.3rem;
          color: #222;
          font-weight: bold;
          text-align: center;
          margin-bottom: 0.32rem;
        }
        .choSxRouter {
          background:rgba(128,213,102,0.2);
          color: @mainColor;
        }
      }
    }
  }
</style>
